<template>
  <div class="he-ad">
    <div class="he-1 middle">
      <img class="img-1" src="../../assets/head/logo.png" alt="农林大学" />
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        :router="true"
        :ellipsis="false"
      >
        <el-menu-item
          :index="item.path"
          v-for="(item, index) in arr"
          :key="index"
          class="tex-1"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
      <div class="zuo-1">
        <!-- <div class="i-1">
          <el-popover
            placement="top-start"
            title="个性换肤"
            :width="200"
            trigger="hover"
          >
            <template #reference>
              <el-button :icon="Menu" circle />
            </template>
            <div style="padding: 10px">这里是 popover 的内容</div>
          </el-popover>
        </div> -->
        <div class="i-1">
          <el-popover
            placement="bottom"
            :width="200"
            trigger="click"
            @show="handleShow"
            @hide="handleHide"
          >
            <template #reference>
              <el-button :icon="Search" circle v-if="flag" />
              <el-button :icon="CircleClose" v-else circle />
            </template>
            <div class="sou-1">
              <el-input v-model="input" placeholder="请输入" />
              <el-button type="primary">搜索</el-button>
            </div>
          </el-popover>
        </div>
        <div class="i-1">
          <el-popover
            :width="100"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </template>
            <div class="but-1" @click="del">
              <div class="texs-1">退出</div>

              <el-icon color="#000" class="no-inherit">
                <CaretRight />
              </el-icon>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search, CircleClose } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router' // 引入Vue Router
const arr = [
  {
    name: '首页',
    path: '/home'
  },
  {
    name: '应用中心',
    path: '/application'
  },
  // {
  //   name: '消息中心',
  //   path: '/information'
  // },
  {
    name: '资讯中心',
    path: '/message'
  }
]

const router = useRouter() // 使用 useRouter 钩子获取 router 实例
const route = useRoute() // 使用 useRoute 钩子获取当前的 route 对象
const activeIndex = ref(route.path) // 初始化 activeIndex 为当前路由路径
const handleSelect = (key: string) => {
  if (activeIndex.value !== key) {
    activeIndex.value = key
    router.push(key).then(() => {
      nextTick(() => {
        // 确保 DOM 已更新
        activeIndex.value = key
      })
    })
  }
}
// 通过 watch 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeIndex.value = newPath
  },
  { immediate: true } // immediate 选项确保了 watch 在初次运行时就执行
)
const input = ref('')

const flag = ref(true)

const handleShow = () => {
  flag.value = false
}
const handleHide = () => {
  flag.value = true
}
const del = () => {}
</script>

<style lang="scss" scoped>
.he-ad {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  border-bottom: 1px solid #ebeef5;
}
.he-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zuo-1 {
  display: flex;
  align-items: center;
}
.el-menu--horizontal.el-menu {
  border-bottom: none;
  margin-left: 162px;
}
.tex-1 {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  font-family: 微软雅黑;
  margin: 0 5px;
}
.sou-1 {
  display: flex;
}
.i-1 {
  margin: 0 10px;
}
.but-1 {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;

  cursor: pointer;
  &:hover {
    background-color: #ebeef5;
  }
  .texs-1 {
    font-size: 16px;
    margin: 0 5px;
  }
}
</style>
